import './style.scss'
import { Component } from 'react'
import { loginAdmin } from '../../api/admin'
import { MessagePlugin } from 'tdesign-react';
import  withRouter  from '../../util/withRouter'
import { connect  } from 'react-redux'
import { setAdminInfo } from '../../store/adminSlice'
import { setMenu } from '../../store/commonSlice'

class  Login  extends Component {
          
    state = {
        name:'',
        pwd:''
    };
   
     handleLogin =  async ()=>{
        // 数据过滤
        if(!this.state.name) return MessagePlugin.info('请填写正确用户名')
        if(!this.state.pwd) return MessagePlugin.info('密码！不填了？？？？')


        // 执行登录
        let res =  await loginAdmin({
            name:this.state.name,
            pwd:this.state.pwd
        })

        console.log('res',res)
        console.log('props' ,  this.props)

        this.props.dispatch(setAdminInfo(res.data))  // 全局设置adminInfo
        // 模拟一下登录之后菜单的动态生成
        this.props.dispatch(setMenu(res.menu))

        MessagePlugin.info('登录成功')
        // 重定向到 /index
        this.props.navigate('/index',{replace:true})
     
    }
    render(){

        return (
            <div className='loginPage'>
                <div className='loginbox'>
                    <div >
                        <input placeholder='请输入账号' value={this.state.name} onChange={ ev=>this.setState({name:ev.target.value}) } />  
                    </div>
                    <div>
                        <input placeholder='请输入密码' type="password" value={this.state.pwd}  onChange={ ev=>this.setState({pwd:ev.target.value}) } />  
                    </div>
                    <div>
                        <button onClick={ this.handleLogin }>立即登录</button>
                    </div>
                    
                </div> 

            </div>
        )

    }
       
}


const mapStateToProps = (state)=>({...state})

// 特别纠结？？？？
export default connect(mapStateToProps)(withRouter(Login));